import React, { useEffect, useState } from 'react'
import { Button, Card, Form, Select, DatePicker, message, Tabs } from 'antd'
import "./index.css"
import { fetchRequest } from '@/utils/Request';
import { url } from '@/utils/url';
import {
    SearchOutlined,
    SyncOutlined,
    FallOutlined
} from '@ant-design/icons'
import {debounce} from "lodash";
const {TabPane} = Tabs;
function SearchHead(props: any) {
    const { Option } = Select;
    const { handleFinish, download, list, category ,TabsChange} = props
    const [form] = Form.useForm()
    const [collegeAreaList, setCollegeAreaList] = useState<any[]>([]);
    const collegeAreaOption = collegeAreaList.map((d: any, index: number) => <Option value={d.collegeAreaId} key={index}>{d.collegeAndArea}</Option>);
    const collegOption = list.map((d: any, index: number) => <Option value={d.key} key={index}>{d.text}</Option>)
    useEffect(() => {
        getSchoolOrganizationRequest()
    }, [])
    //请求在校学生组织机构
    async function getSchoolOrganizationRequest(collegeAndAreName: string = '') {
        try {
            console.log(collegeAndAreName)
            const json = await fetchRequest(url.GET_CAMPUS, {collegeAndAreName: collegeAndAreName});
            if (json.success) {
                message.destroy();
                setCollegeAreaList(json.data);
            } else {
                message.destroy();
                message.error(json.error);
            }
        } catch (error: any) {
            message.destroy();
            message.error(error.message);
        }
    }

    const handleReset = (values: any) => {
        form.resetFields();
    }
    const {RangePicker} = DatePicker;
    const onSearch = debounce(getSchoolOrganizationRequest, 300, {leading: false, trailing: true})
    const visitor = <Card className="search1-forms"> <Form form={form} layout="inline"
                                                           onFinish={handleFinish} onReset={handleReset}>
        <Form.Item className="form-control-item" name="allAddress" label="校区">
            {/* <Cascader
                placeholder="请选择组织机构"
                options={treeNode}
                loadData={loadData}
                changeOnSelect
            /> */}
            <Select style={{width: 300}} showSearch
                    notFoundContent={null}
                    showArrow={false}
                    filterOption={false}
                    allowClear
                    onSearch={onSearch}>
                {collegeAreaOption}
            </Select>
        </Form.Item>
        <Form.Item className="form-control-item" name="accessCardState" label="防疫核验">
            <Select className="search-form-item" style={{width: 175}}>
                {collegOption}
            </Select>
        </Form.Item>
        <Form.Item label="到访时间" name="times" className="form-control-item" >
            <RangePicker />
        </Form.Item>
        <Form.Item className="form-control-item">
            <Button key="2" htmlType="reset" style={{ marginRight: '8px' }} icon={<SyncOutlined />} >重置</Button>
            <Button key="1" type="primary" htmlType="submit"
                style={{ marginRight: '8px' }} icon={<SearchOutlined />}>搜索</Button>
            <Button type={'primary'} onClick={download} icon={<FallOutlined />}>导出</Button>
        </Form.Item>
    </Form></Card>
    const abnormal = <Card className="search1-forms">
        <Tabs className={'achievement-tab'} onChange={TabsChange}>
            <TabPane key={1} tab={'人脸一体机'}>
            </TabPane>
            <TabPane key={2} tab={'绿码通设备'}>
            </TabPane>
        </Tabs>
        <Form form={form} layout="inline"
            onFinish={handleFinish} onReset={handleReset} >
            <Form.Item className="form-control-item" name="allAddress" label="校区">
                <Select style={{width: 300}}
                        showSearch
                        allowClear
                        notFoundContent={null}
                        showArrow={false}
                        filterOption={false}
                        onSearch={onSearch}>
                    {collegeAreaOption}
                </Select>
            </Form.Item>
            <Form.Item className="form-control-item" name="accessCardState" label="防疫核验">
                <Select className="search-form-item" style={{width: 175}}>
                    {collegOption}
                </Select>
            </Form.Item>
            <Form.Item label="到访时间" name="times" className="form-control-item" >
                <RangePicker />
            </Form.Item>
            <Form.Item className="form-control-item">
                <Button key="2" htmlType="reset" style={{ marginRight: '8px' }} icon={<SyncOutlined />} >重置</Button>
                <Button key="1" type="primary" htmlType="submit"
                    style={{ marginRight: '8px' }} icon={<SearchOutlined />}>搜索</Button>
                <Button type={'primary'} onClick={download} icon={<FallOutlined />}>导出</Button>
            </Form.Item>
        </Form>
    </Card>
    return (
        category === 1 ? abnormal : visitor
    )
}

export default SearchHead
